<template>
  <div class="shop-container">
    <el-scrollbar height="calc(100vh - 100px)">
      <div class="search-area" shadow="never">
        <!-- 搜索区域 -->
        <el-form :inline="true" size="default">
          <el-form-item label="搜索内容：">
            <div class="search-content-wrapper">
              <el-input
                v-model="resetSearch.name"
                placeholder="请输入搜索任务名称"
                clearable
              >
                <template #prefix>
                  <el-icon>
                    <Search />
                  </el-icon>
                </template>
              </el-input>
              <div class="search-buttons">
                <el-button type="primary" :icon="Search" @click="getTasklist"
                  >搜索</el-button
                >
              </div>
            </div>
          </el-form-item>
        </el-form>
        <!-- 筛选区域 -->
        <div class="filter-area">
          <el-form :inline="true" size="default">
            <el-form-item label="类型：">
              <el-select
                v-model="resetSearch.type"
                clearable
                style="width: 150px"
              >
                <el-option
                  @click="getTasklist"
                  v-for="option in lifecycleOptions"
                  placeholder
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="执行状态：">
              <el-select
                v-model="resetSearch.audit"
                clearable
                style="width: 150px"
              >
                <el-option
                  @click="getTasklist"
                  v-for="option in stateOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据表格 -->
        <div class="Item">
          <el-table :data="listData" border style="height: calc(100vh - 414px)">
            <!-- 第一列 -->
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="任务名称" min-width="5">
            </el-table-column>
            <!-- 第二列 -->
            <el-table-column prop="audit_username" label="审核人" min-width="5">
            </el-table-column>
            <!-- 第三列 -->
            <el-table-column prop="user" label="申请人" min-width="5">
              <template #default="{ row }">
                {{ row.user?.username }}
              </template>
            </el-table-column>
            <!-- 第四列 -->
            <el-table-column prop="file_url" label="图片组" min-width="5">
              <template #default="{ row }">
                <el-button link type="primary" @click="checkData(row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <!-- 第五列 -->
            <!-- <el-table-column prop="scene_group_id" label="场景id组" min-width="5">
                </el-table-column> -->
            <!-- 第六列 -->
            <el-table-column prop="create_time" label="创建时间" min-width="15">
            </el-table-column>
            <el-table-column prop="result" label="结果" min-width="5">
              <template #default="{ row }">
                <el-button link type="primary" @click="dialogVisible3 = true"
                  >查看</el-button
                >
              </template>
            </el-table-column>
            <!-- 第八列 -->
            <el-table-column prop="audit" label="执行状态" min-width="5">
              <template #default="{ row }">
                {{
                  row.audit == 0
                    ? "待执行"
                    : row.audit == 1
                    ? "已完成"
                    : "执行失败"
                }}
              </template>
            </el-table-column>
            <!-- 第八列 -->
            <el-table-column label="操作" min-width="5" fixed="right">
              <template #default="{ row }">
                <el-button link type="primary" @click="showDialog(row.task_id)"
                  >编辑</el-button
                >
                <el-button link type="primary">执行</el-button>
                <el-button link type="primary">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 编辑弹窗 -->
          <el-dialog
            v-model="dialogVisible"
            title="Tips"
            width="60%"
            :before-close="handleClose"
          >
            <fuwuedit />
            <!-- <el-form :inline="true" size="default">
              <el-form-item label="任务名称：">
                <div class="search-content-wrapper">
                  <el-input
                    v-model="xqdata.name"
                    placeholder="请输入任务名称"
                    clearable
                  >
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="执行状态：">
                <el-select
                  v-model="xqdata.audit"
                  clearable
                  style="width: 150px"
                >
                  <el-option
                    v-for="option in stateOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-form> -->
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editTaskedit">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
          <!-- 图片查看弹窗 -->
          <el-dialog
            v-model="dialogVisible1"
            title="Tips"
            width="500"
            :before-close="handleClose"
          >
            <div class="demo-image__preview">
              
                <el-image
                v-for="(item, index) in imagedata"
                :key="item.file_id"
                style="width: 100px; height: 100px"
                :src="item.file_url"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                show-progress
                :initial-index="4"
                fit="cover"
                
              />
              
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">
                  确认
                </el-button>
              </div>
            </template>
<<<<<<< HEAD
          </el-dialog>
          <!-- 结果查看弹窗 -->
          <el-dialog
            v-model="dialogVisible3"
            title="Tips"
            width="60%"
            :before-close="handleClose"
          >
            <div class="执行结果">
              <h1>执行结果列表:</h1>
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible3 = false">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
=======
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="resetSearch.currentPage" v-model:page-size="resetSearch.pageSize"
          :total="resetSearch.total" :page-sizes="[20, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleListSizeChange" @current-change="handleListCurrentChange" background />
      </div>
    </div>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑" width="60%" :before-close="handleClose" destroy-on-close>
      <fuwuedit :editData="xqdata" @close="fuwueditClose" />
    </el-dialog>
    <!-- 图片查看弹窗 -->
    <el-dialog v-model="dialogVisible1" :title="isCheckImg ? '图片列表' : '执行结果'" width="50%" :before-close="handleClose"
      :close="handleReset" destroy-on-close>
      <div class="demo-image__preview">
        <el-scrollbar height="500px">
          <div style="display: flex; justify-content: flex-end;">
            <el-button style="margin: 10px;" v-if="isCheckImg" type="primary"
              @click="handleDownloadAll">下载全部</el-button>
          </div>
          <div class="image-list">
            <el-image v-for="item in imagedata" :key="item.file_id"
              style="width: 100px; height: 100px; border-radius: 5px;" :src="item.file_url"
              :preview-src-list="imgUrlList" lazy fit="cover" />
          </div>
        </el-scrollbar>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[20, 50, 100, 200]"
          layout="sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible1 = false">
            确认
          </el-button>
>>>>>>> dev_yw
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            :page-sizes="[50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            background
          />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { TASKIMAGE, TASKDETAIL, TASKEDIT, TASKLIST } from "@/api/fuwu.js";
import { ElMessageBox, ElMessage } from "element-plus";
import fuwuedit from "./edit.vue";
import {
  Search,
  Setting,
  Close,
  Refresh,
  Operation,
  ArrowDown,
  FolderAdd,
  Warning,
  Plus,
  Upload,
  Download,
  View,
  Edit,
  Delete,
  Picture,
} from "@element-plus/icons-vue";
const listData = ref([]); //任务列表
const xqdata = ref({}); //详情
const imagedata = ref([]); //任务图片
const imgUrlList = ref([]) //任务图片列表

const lifecycleOptions = [
  { label: "图片渲染", value: 1 },
  { label: "图片裂变", value: 2 },
  { label: "图片高清", value: 3 },
  { label: "新品场景", value: 4 },
];

const stateOptions = [
  { label: "待执行", value: 0 },
  { label: "已完成", value: 1 },
  { label: "执行失败", value: 2 },
];

//编辑弹窗

const dialogVisible1 = ref(false);
const dialogVisible = ref(false);
const dialogVisible3 = ref(false);
//点击编辑后获取到的id
const taskId = ref();

const handleClose = (done) => {
  ElMessageBox.confirm("你确定关闭弹窗吗?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

// 搜索表单
const resetSearch = ref({
  name: "",
  audit_user_id: "",
  file_url: "",
  scene_group_id: "",
  user_id: "",
  type: "",
  audit: "",
  reason: "",
  task_id: "",
  create_time: "",
});

// 弹窗表单
const tchFrom = ref({
  name: "",
  audit_username: "",
  audit_user_id: "",
  file_url: "",
  scene_group_id: "",
  user: {
    id: "",
    username: "",
  },
  type: "",
  audit: "",
  reason: "",
  task_id: "",
});

// 编辑服务列表

const editTaskedit = async () => {
  try {
    tchFrom.value = JSON.parse(JSON.stringify(xqdata.value));
    tchFrom.value.task_id = taskId.value;
    console.log("🚀 ~ editTaskedit ~ tchFrom.value:", tchFrom.value);
    const response = await TASKEDIT(tchFrom.value);
    console.log(response);
    ElMessage.success("编辑成功");
  } catch (error) {
    console.error("编辑失败:", error);
    ElMessage.error("编辑失败");
  }
};

// 获取服务列表
const getTasklist = async () => {
  try {
    console.log("Fetching notice list...");
    const { data } = await TASKLIST(resetSearch.value);
    listData.value = data.data;
    console.log("Notice list loaded:", listData.value);
  } catch (error) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
    console.error("获取服务列表失败:", error);
    ElMessage.error("获取服务列表失败");
  }
};

const showDialog = async (id) => {
  dialogVisible.value = true;
  await getXqdata(id);
};

const checkData = async (data) => {
  console.log("🚀 ~ checkData ~ data:", data);
  dialogVisible1.value = true;
  getTaskimg(data.task_id);
};

//获取任务图片

const getTaskimg = async (id) => {
  try {
    taskId.value = id;
    const { data } = await TASKIMAGE({ task_id: id });
    imagedata.value = data.data;
    
    //获取图片预览url列表
    imgUrlList.value = imagedata.value.map((item)=>item.file_url)
    
  } catch (error) {
    console.error("获取图片失败:", error);
    ElMessage.error("获取图片失败");
  }
};

//获取详情

const getXqdata = async (id) => {
  try {
    taskId.value = id;
    console.log("Fetching notice list...");
    const { data } = await TASKDETAIL({ task_id: id });
    xqdata.value = data;
  } catch (error) {
    console.error("获取详情失败:", error);
    ElMessage.error("获取详情失败");
  }
};
// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 50,
  total: 52299,
});

getTasklist();
</script>

<style lang="scss" scoped>
.scrollbar-wrapper {
  overflow-x: hidden;
  padding: 1px 1px 20px 1px;
}
 .image {
  width: 100px;
  height: 50px;
 }
.demo-image__preview{
  background-color: #dddddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;  
}
.el-image {
margin-top: 20px;
margin-left: 12px;
}

h1 {
  font-weight: bold;
  color: black;
}
.shop-container {
  height: calc(100vh - 100px);
  padding: 20px;

  :deep(.el-scrollbar) {
    border-radius: 10px;
  }

  .search-area {
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 1px 1px 5px 1px #33333330;
  }

  .advanced-search {
    width: 46%;
    background-color: #f0f0f0;
    padding: 20px;
    margin: 20px 0;
    border-radius: 4px;

    :deep(.el-date-editor) {
      width: 100px !important;
    }

    :deep(.el-date-editor .el-input__wrapper) {
      width: 100px !important;
    }

    :deep(.el-date-editor .el-input__inner) {
      width: 100px !important;
    }

    .form-item-custom {
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      :deep(.el-form-item__label) {
        width: 120px;
        text-align: right;
        margin-right: 8px;
        white-space: nowrap;
      }

      .remark-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .input-custom {
        width: 180px;
      }

      .select-custom {
        width: 180px;
      }

      .separator {
        margin: 0 8px;
      }
    }

    .date-picker-row {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      margin-left: 0;

      .time-type-select {
        width: 120px;
        margin-right: 8px;
      }

      .date-picker-wrapper {
        :deep(.el-range-editor) {
          width: 360px !important;
        }
      }
    }

    .button-row {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-left: 85px;
    }
  }

  .filter-area {
    margin: 10px 0;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
  }

  .table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .left-tools {
      display: flex;
      align-items: center;
      gap: 12px;

      .el-tag {
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }

    .right-tools {
      display: flex;
      gap: 12px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .image-error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: #f5f7fa;
    color: #909399;
    font-size: 20px;
  }

  .price {
    color: #f56c6c;
    font-weight: bold;
  }

  :deep(.el-table) {
    border-radius: 4px;
    overflow: hidden;

    .el-table__header {
      background-color: #f5f7fa;
    }
  }

  .ml-2 {
    margin-left: 8px;
  }

  .mx-2 {
    margin: 0 8px;
  }

  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  .search-content-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-input {
      width: 300px;
    }

    .search-buttons {
      display: flex;
      gap: 8px;
    }
  }

  .operation-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
}
</style>
